import React, { PureComponent } from "react";

export class App extends PureComponent {
  constructor() {
    super();
    this.state = {
      books: [
        { name: "你不知道JS", price: 99, count: 1 },
        { name: "JS高级程序设计", price: 67, count: 1 },
        { name: "React高级设计", price: 88, count: 1 },
        { name: "Vue知识认识", price: 92, count: 1 },
      ],
    };
  }
  addNewBook(){
    
    const newBook = {
        name:"Angular 语言",
        price: 88,
        count:1
    }
    // 1,直接修改原有的state,重新设置一遍
    // 在PureComponent是不能引入重新渲染(re-render)
    // this.state.books.push(newBook)
    // this.setState({books:this.state.books})

    // 2. 复制一份books 在新的books中修改,设置新的books
    const books =[...this.state.books] 
    books.push(newBook)
    this.setState({books:books})
  }
  addBookCount(index){
    console.log("点击了count",index)
    const newBook = [...this.state.books]
    newBook[index].count++
    this.setState({books:newBook})
  }
  render() {
    const { books } = this.state;
    return (
      <div>
        <h2>数据列表</h2>
        <ul>
          {books.map((item, index) => {
            return <li key={index}><span>name:{item.name}-price:{item.price}-count:{item.count}</span>
            <button onClick={e=>this.addBookCount(index)}>+1</button></li>;
          })}
        </ul>
        <button onClick={e=> this.addNewBook()}>添加新书籍</button>
      </div>
    );
  }
}

export default App;
